<template>
  <div class="customer">
    <!-- 顾客头像 -->
    <van-image class="customer-avatar" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>

    <!-- 顾客信息 -->
    <div class="customer-info">
      <h2 class="customer-name">张三</h2>

      <div class="container">
        <span>评价&nbsp;56</span>
        <span>收藏&nbsp;56</span>
        <span>黄金<van-icon name="vip-card" color="yellow" size="20px"/></span>
      </div>
    </div>
  </div>

  <div class="operation">
    <van-cell-group>
      <van-cell
          icon="comment-o"
          title="订单中心"
          is-link
          @click="$router.push('/book/list')"
      />

      <van-cell
          icon="setting-o"
          title="设置"
          is-link
          @click="$router.push('/settings')"
      />
      <van-cell
          icon="location-o"
          title="我的地址"
          is-link
          @click="$router.push('/address/list')"
      />
      <van-cell
          icon="star-o"
          title="我的收藏"
          is-link
          @click="$router.push('/favorate')"
      />
    </van-cell-group>
  </div>


</template>

<style scoped>

.customer {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20px;
}


.customer .customer-avatar {
  width: 80px;
  height: 80px;
  margin-right: 4px;
}

.customer .customer-info {
  flex: 1;
}

.customer .customer-info .customer-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
}

.customer .customer-info .container {
  display: flex;
  align-items: baseline;
  line-height: 14px;
  font-size: 14px;
}

.customer .customer-info .container span {
  margin-right: 4px;
}

.operation{
  border-radius: 4px;
  padding: 10px;
}
</style>
